এইচটিএমএল -এর মৌলিক বিষয়সমূহ

একাদশ- দ্বাদশ শ্রেণি - তথ্য ও যোগাযোগ প্রযুক্তি - ওয়েব ডিজাইন পরিচিতি এবং HTML | NCTB BOOK

এ অধ্যায়ের ৪.২ পাঠ অংশটুকু পুরোপুরি ব্যাবহারিক। প্রোগ্রামিং করার ব্যবস্থা আছে (কম্পিউটারে কিংবা স্মার্টফোনে) শুধু সেরকম পরিবেশে পরের অংশটুকু শিক্ষার্থীর জন্য অর্থপূর্ণ বলে বিবেচিত হবে

HTML নিয়ে কাজ শুরু করতে চাইলে প্রথমেই একটি ফাইল তৈরি করতে হবে। যে কোনো নাম দিলেই চলবে, এক্সটেনশন হবে.html। যেমন - mypage.html। এখন এই ফাইলের মধ্যে HTML কোড লিখতে হবে। ফাইলটি ব্রাউজার দিয়ে খোলা হলো, তাহলে একটি ফাঁকা পেইজ দেখা যাবে। কারণ, ফাইলটিতে এখনো কিছু লেখা হয়নি। HTML ফাইল এডিট করার জন্য যে কোনো একটি টেক্সট এডিটর ব্যবহার করলেই চলবে, যেমন- নোটপ্যাড, নোটপ্যাড++, সাবলাইম টেক্সট ইত্যাদি।

HTML উপাদান (HTML Element) একটি বইয়ে সাধারণত কী কী অংশ থাকে সেটি বিবেচনা করা যাক। বইয়ের একাধিক খণ্ড থাকতে পারে, একটি খণ্ডে একাধিক অধ্যায় থাকে। প্রতিটি অধ্যায়ে আবার শিরোনাম বা হেডিং, সাবহেডিং, অনুচ্ছেদ বা প্যারাগ্রাফ থাকতে পারে। এছাড়াও বইতে বিভিন্ন ছবি, ছবির ক্যাপশন, সারণি বা টেবিল ইত্যাদি অংশ থাকতে পারে। তেমনি একটি HTML পেইজেও বিভিন্ন অংশ বা উপাদান থাকে। এ উপাদানগুলোকে বলা হয় HTML এলিমেন্ট ( HTML Elements) ।

HTML-এর এলিমেন্ট লেখার জন্য ব্যবহার করা হয় ট্যাগ। ট্যাগকে অনেকটা ব্র্যাকেট বা বন্ধনীর সঙ্গে তুলনা করা যেতে পারে। সাধারণত এলিমেন্টের শুরু বোঝাতে একটি ওপেনিং ট্যাগ এবং শেষ বোঝাতে একটি ক্লোজিং ট্যাগ ব্যবহার করা হয়। ওপেনিং ট্যাগ, দুই ট্যাগের মধ্যবর্তী কনটেন্ট ও ক্লোজিং ট্যাগ মিলে যা হয় তা-ই একটি এলিমেন্ট। তবে কিন্তু এলিমেন্ট আছে যাদের মধ্যে কোনো কনটেন্ট থাকে না, তাই এদের ক্লোজিং ট্যাপও থাকে না। এদেরকে বলা হয় এম্পটি (empty) এলিমেন্ট।

ট্যাগ গঠিত হয় এলিমেন্টের নাম বা নামের অংশ দিয়ে। ওপেনিং ও ক্লোজিং ট্যাগের গঠন হয় এরকম, <element_name> ও < / element_name> । দুটি অ্যাঙ্গেল ব্র্যাকেটের ভেতরে এলিমেন্টের নাম লিখলে হয় ওপেনিং ট্যাগ, আর ক্লোজিং ট্যাগ হয় এ রকম, </...>। অর্থাৎ, এলিমেন্টের নামের আগে একটি অতিরিক্ত ফরওয়ার্ড স্ল্যাশ চিহ্ন (Forward Slash – 1 ) দেওয়া হয়। ওপেনিং এবং ক্লোজিং ট্যাগের ভেতরের লেখা এলিমেন্টের নাম একই হতে হবে।

নিচে একটি HTML কোড দেখানো হলো।

<!DOCTYPE html>

<html>

<body>

Hello World!

</body> </html>

কোডটি টাইপ করে ফাইলটি সেভ করে ব্রাউজারে ওপেন করলে স্ক্রিনে Hello World! লেখাটি দেখাবে।

Shello.html

O File | C:/Users/rafit/Desktop...

★

Incognito

Hello World !

উপরের কোডটি ভালো করে লক্ষ করা যাক। প্রথম লাইনে আছে <IDOCTYPE html>, যাকে বলা হয় ডকুমেন্ট টাইপ ডিক্লারেশন। এর দ্বারা ব্রাউজার বুঝতে পারে যে ডকুমেন্টটি HTML 5 স্ট্যান্ডার্ড অনুসরণ করে লেখা হয়েছে এবং সেই অনুযায়ী রেন্ডার (প্রদর্শন) করে। এটি আসলে ডকুমেন্টের অংশ নয়, তবে লেখা জরুরি।

HTML যাবতীয় এলিমেন্ট রাখতে হয় একটি মূল এলিমেন্টের ভেতরে, সেটি হচ্ছে html সেজন্য দ্বিতীয় লাইনে আছে <html> ট্যাগ, ডকুমেন্টের শেষও কিন্তু হয়েছে </html> ট্যাগ দিয়ে। এরপর আছে <body> ট্যাগ। ব্রাউজারে আমরা যা কিছু দেখি তার সবই থাকে body এলিমেন্টের ভেতরে। বড়ির ভেতরে আমরা লিখেছি Hello Worldl, এই লেখাটিই রাউজার দেখাবে।

ৰঞ্চি এলিমেন্ট যেমন আছে, তেমনি একটি হেড এলিমেন্টও আছে। ওয়েব পেইজের দৃশ্যমান সবকিছু দেওয়া হুর বস্তির ভেতরে, আর হেডের ভেতরে ওয়েব পেইজ সম্পর্কে তথ্য দেওয়া, বিভিন্ন সেটিংস ঠিক করা, স্টাইল, স্ক্রিপ্ট এসব নিয়ন্ত্রণ করা ইত্যাদি কাজ করা হয়। ব্রাউজারের ট্যাবে ওয়েবপেইজের যে শিরোনাম বা টাইটেল (title) দেখা যায় তা লেখা থাকে হেডে। উপরে তৈরি পেইজে একটি টাইটেল যুক্ত করে দেওয়া যাক।

<!DOCTYPE html>

<title>My first html doc</title>

</head> <body>

Hello World!

</body> </html>

এই কোডটি লিখে সেভ করে ব্রাউজারে ওপেন করলে আগের মতোই Hello world! দেখা যাবে। একইসঙ্গে ব্রাউজারের টাইটেল বারে টাইটেলটিও দেখা যাবে। এখানে <title> </title> ট্যাগ দিয়ে ওয়েব পেইজের টাইটেল দেখানো হয়েছে।

My first html doc

File C:/Users/ralit/Desktop...✩

Incognito

Hello World!

HTML এর এলিমেন্ট লেখার নিয়ম

একটি এইচটিএমএল ডকুমেন্টে এলিফেন্টগুলো একটির পরে একটি থাকতে পারবে। আবার, একটি এলিমেন্টের ভেতর এক বা একাধিক এলিমেন্ট থাকতে পারে। তবে একটি এলিমেন্ট জন্য একটি এলিমেন্টকে সমাপতিত (overlap) করতে পারবে না। এলিমেন্টগুলোকে অসংখ্য বিভিন্ন আকারের কৌটার সঙ্গে তুলনা করা যেতে পারে। একটি বড় কৌটার ভেতরে ছোট ছোট কয়েকটি কৌটা থাকতে পারে। একটির পাশে অন্যটি বা একটির উপর অন্য কৌটা থাকতে পারে। কিন্তু কখনোই একটি কৌটা অন্য দুই বা ততোধিক কৌটার ভেতরে থাকতে পারবে না। এখানে কৌটার মুখ ও ভলাকে ওপেনিং ও ক্লোজিং ট্যাগ হিসেবে চিন্তা করা যেতে পারে।

<p> <em> Abracadabra</p> </em> ভুল <p> <em> Abracadabra </em> </p> সঠিক

ওয়েবপেইজ মেন্যু → নেভিগেশন মেন্যু

→ ওয়েবপেইজ আ → ওয়েবপেইজ টাইটেল

উইন্ডো কন্ট্রোল

→ বুকমার্ক চিহ্ন

→ বুকমার্কবার

চলবার

উইকিপিডিয়া

বাংলাদেশ

গণপ্রজাতন্ত্রী বাংলাদেশ বাংলাদেশ

ওয়েবপেইজ

ইমেজ বা ছবি

বাংলাদেশ প্রচার একটি সর্বতোষ রায়। বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। রাজনৈতিক তাই বালাদেশের পশ্চিমে পশ্চিম পশ্চিমবঙ্গ, মেঘা মায়ানমারের দিন এবং উপকূলের দিকে মদীমাতৃক বাংলাদেশ মুখের উপর দিয়ে রয়ে ে বাংলাদেশের উত্তর-পূর্বে ও দক্ষি বিশ্বে

অডিও মিডিয়া

চিত্র 4.2 : ওয়েব ব্রাউজার ও ওয়েব পেইজের বিভিন্ন অংশ

হেডিং (Heading)

খবরের কাগজ পড়ার সময় বিভিন্ন রকম শিরোনাম বা হেডিং দেখতে পাওয়া যায়। প্রধান শিরোনাম থাকে অনেক বড় অক্ষরে, তারপর আরো বিভিন্ন আকারে বিভিন্ন শিরোনাম থাকে। সেরকম এইচটিএমএল পেইজেও বিভিন্ন আকারের হেডিং দেওয়া যায়। এইচটিএমএলে ছয়টি হেডিং এলিমেন্ট রয়েছে। এগুলো যথাক্রমে h1, h2, h3,h4,h5h6 দিয়ে প্রকাশ করা হয়। এর মধ্যে h1-এর আকার সবচেয়ে বড়, h6 - এর আকার সবচেয়ে ছোট। কোনটির আকার কেমন তা জানার জন্য একটি কোড দেখানো হলো।

<!DOCTYPE html>

<html>

<head>

<title>HTML Heading</title>

</head>

<body>

<h1>This is heading 1 </h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3> <h4>This is heading 4</h4>

<h5>This is heading 5</h5> <h6> This is heading 6</h6>

</body>

</html>

কোডটি সেভ করে ব্রাউজারে ওপেন করলে এ রকম দেখা যাৰে-

HTML Heading

O File | C:/Users/rafit/Desktop/a.html

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

প্রয়োজনীয় কিছু এলিমেন্ট

এখন mypage.html ফাইলটিতে আরো কিছু কোড যোগ করা হলো।

<!DOCTYPE html>

<html>

<head>

<title>This is my first HTML page</title> </head> This is an html document.

<body>

Hello World !

</body> </html>

এখন ফাইলটি সেভ করে ব্রাউজারে পেইজটি রিফ্রেশ করতে হবে। ব্রাউজারের রিফ্রেশ বা রিলোড বাটন চেপে কিংবা কিবোর্ডে F5 বাটন চেপে পেইজ রিফ্রেশ করা যায়। তাহলে দেখা যাবে উপরের বডির ভেতরের দুটি লাইন ব্রাউজারে এক লাইনে দেখাচ্ছে। কোডে যদিও আলাদা আলাদা লাইনে লেখা হয়েছে।

This is my first HTML page

o Incognito

O File | C:/Users/rafit/Desktop... ★

| Hello World ! This is an html document.

তাহলে লেখাটি দুই লাইনে দেখানোর উপায় কী? সেক্ষেত্রে একটি নতুন এলিমেন্ট ব্যবহার করতে হবে যার নাম br। এটি একটি ফাঁকা বা এম্পটি এলিমেন্ট। এর কোনো ক্লোজিং বা শেষ ট্যাগ নেই।

<!DOCTYPE html>

<html> <head>

<title>This is my first HTML page</title>

</head> <body>

Hello World! <br>

This is an HTML document.

</body>

</html>

এখন ফাইলটি সেভ করে রাউজারে পেইজটি রিফ্লেশ করলে দেখা যাবে এবারে দুই লাইনে আলাদা করে

লেখাটি দেখাচ্ছে।

This is my first HTML page.

O File C:/Users/rafit/Desktop.....

Hello World! This is an HTML document.

আবার অনুচ্ছেদ (প্যারাগ্রাফ) লিখতে হলে p এলিমেন্ট ব্যবহার করতে হবে।

<IDOCTYPE html>

<html> <head>

<title>This is my first HTML page</title>

</head> <body>

Hello World! <br> <p>This is an html page. This is paragraph one.</p> <p>This

is paragraph two.</p>

</body> </html>

কোডটি সেভ করে রাউজারে ওপেন করলে নিচের মতো দেখাবে—

This is my first HTML page

File C:/Users/rafit/Desktop/a.html

Incognito

Hello World!

This is an html page. This is paragraph one.

This is paragraph two.

এখানে প্রথম ও দ্বিতীয় প্যারাগ্রাফ-এর মধ্যে কিন্তু আলাদা করে লাইন ব্রেক (<br>) দিতে হয়নি। p এলিমেন্ট নিজেই একটি ফাঁকা জায়গা তৈরি করে নিয়েছে। তবে চাইলে কোনো প্যারাগ্রাফের মধ্যেও লাইন ব্লেক দেওয়া যায়।

<p>This is an html page. This is <br> paragraph one.</p>

<p>This is paragraph two. </p>

This is my first HTML page

O File | C:/Users/rafit/Desktop...

Incognito

This is an html page. This is

paragraph one.

This is paragraph two.

লাইন ব্রেকের তুলনায় প্যারাগ্রাফ ব্রেকে ক্ষেত্রে একটু বেশি পরিমাণে ফাঁকা জায়গা থাকে।

এছাড়া অনুভূমিক রেখা (horizontal line) আঁকার জন্য রয়েছে হরাইজন্টাল রুল এলিমেন্ট। একে hr দিয়ে প্রকাশ করা হয়। এটিও একটি ফাঁকা এলিমেন্ট।

<p>This is an html page. This is paragraph one. </p> <hr> <p>This is paragraph two. </p>

This is my first HTML page

O File | C:/Users/rafit / Desktop...

This is an html page. This is paragraph one.

This is paragraph two.

Incognito

টেক্সট ফরম্যাটিং (Text Formatting)

টেক্সটের সাধারণ ফরম্যাটিংয়ের মধ্যে আছে বোল্ড করা, ইটালিক করা, আন্ডারলাইন করা ইত্যাদি। HTML এ এগুলো করার জন্য যথাক্রমে b, 1 ও u এলিমেন্ট ব্যবহার করা হয়।

<!DOCTYPE html>

<html>

<head> <title>Text Formating</title>

</head> <body>

<p>This is normal text</p>

<p><b>This is bold text</b></p> <p><i>This is italic text</i></p> <p><u>This is underlined text</u></p>

</body>

</html>

Text Formating

File C:/Users/rafit/Desktop...✩

Incognito

This is normal text

This is bold text

This is italic text

This is underlined text

আরো কিছু সাধারণ ফরম্যাটিংয়ের মধ্যে আছে সুপারস্ক্রিপ্ট (লেখাকে উপরে উঠানো), সাবস্ক্রিপ্ট (নিচে

নামানো) ইত্যাদি।

<p>This line contains a <sup>super</sup>script and a

<sub>sub</sub>script.</p>

<p> (a + b) <sup>2</sup> a<sup>2</sup>+2ab+ = b<sup>2</sup></p> <p>f<sub>n</sub> f<sub>n-1</sub> f<sub>n-2</sub></p>

<!DOCTYPE html>

<html>

<head> <title>Text Formating</title>

</head> <body>

<p>This is normal text</p>

<p><b>This is bold text</b></p> <p><i>This is italic text</i></p> <p><u>This is underlined text</u></p>

</body>

</html>

Text Formating

File C:/Users/rafit/Desktop...✩

Incognito

This is normal text

This is bold text

This is italic text

This is underlined text

নামানো) ইত্যাদি।

<p>This line contains a <sup>super</sup>script and a

<sub>sub</sub>script.</p>

<p> (a + b) <sup>2</sup> a<sup>2</sup>+2ab+ = b<sup>2</sup></p> <p>f<sub>n</sub> f<sub>n-1</sub> f<sub>n-2</sub></p>

Text Formating

File C:/Users/rafit/Desktop...

This line contains a super,

Incognito

এছাড়াও কোনো টেক্সটকে সাধারণের চেয়ে বড় বা ছোট করার জন্য big a small নামের দুটি এলিমেন্ট

আছে।

(a + b) 2 = a 2 + 2ab + b2

ascript and a subscript.

কখনো কখনো পেইজের কোনো নির্দিষ্ট অংশকে বিশেষভাবে দৃষ্টিগোচর (emphasize) করানোর প্রয়োজন হয়। আবার কখনো কখনো বক্তব্যের কোনো নির্দিষ্ট অংশকে বিশেষ জোর দিয়ে বলার (লেখার) প্রয়োজন হয়। এই দুটি কাজের জন্য রয়েছে em ও strong নামের দুটি এলিমেন্ট।

<p>The word <em>Emphasize</em> means giving special value to something.

| The word <strong> Strong </strong> is something stronger than

emphasizing.</p>

Text formating

File

C/Users/rafit/Desktop... ☆

Incognito

The word Emphasize means giving special value to sth. The word Strong is sth stronger

than emphasizing.

তালিকা বা লিস্ট (List)

এইচটিএমএল-এ তালিকা তৈরির জন্য আছে ul, ol এবং || ট্যাপ।

নিচে বাংলাদেশের বিভাগগুলোর তালিকা তৈরির কোড দেখানো হলো।

<!DOCTYPE html>

<html>

<head> <title> HTML List Demo</title>

</head> <body>

<ul>

<11>Dhaka</li>

<li>Rajshahi</li> <li>Chattogram</li>

<li>Khulna </li>

<li>Rangpur </li> <li> Barishal</li>

<li>sylhet</li>

<li>Mymensingh</li>

</ul> </body>

</html>

উপরের কোডের আউটপুট দেখাবে নিচের মতো ।

✔ HTML List Demo

O File | C:/Users/rafit/Desktop/a.html

• Dhaka

Rajshahi

• Chattogram • Khulna

• Rangpur

• Barishal

• Sylhet

• Mymensingh

চিত্ৰ 4.5 : তালিকা বা লিস্ট আকারে বাংলাদেশের বিভিন্ন বিভাগের নাম

এখানে লিস্টের জন্য দুটি এলিমেন্ট ব্যবহার করা হয়েছে, ul এবং III ul মানে আনঅর্ডারড লিস্ট (unordered list) এবং li মানে লিস্ট আইটেম (list item)। ক্রমবিহীন তালিকা তৈরি করতে ul এলিমেন্ট ব্যবহার করা হয়। || এলিমেন্ট ব্যবহার করা হয় তালিকার উপাদানগুলো রাখতে। আর ক্রমসহ তালিকা তৈরি করতে ul-এর পরিবর্তে ol ব্যবহার করতে হবে। এখানে ol মানে অর্ডারড লিস্ট (ordered list) |

HTML-এ তালিকার ভেতরেও তালিকা তৈরি করা যায়। যেমন— সিলেট বিভাগের জেলাগুলো যদি তালিকায় থাকে,

Barishal
Sylhet

o Sunamganj

o Sylhet

o Habiganj Moulvibazar

Mymensingh

এরকম তালিকার ভেতরে তালিকা বা নেস্টেড তালিকা (nested list) তৈরি করার জন্য লিস্টের ভেতরে আরেকটি লিস্ট ঢুকিয়ে দিতে হবে।

<body> <ul>

<li>Dhaka </li>

<li>Rajshahi </li>

<li>Rangpur </li>

<li>Chattogram</li> <li>Khulna</li> <li> Barishal</li> <li>Sunamganj</li> <li> Habiganj </li> <li> Moulvibazar </li>

<li>Sylhet</li>

<ul>

<li>Sylhet</li>

</ul>

<li> Mymensingh</li>

</ul>

</body>

উপরের কোডটি একটি HTML ডকুমেন্টে রাখলে নিচের ছবির মতো আউটপুট দেখা যাবে।

Text Formating

File C:/Users/rafit/Desktop... ✰

Incognito

• Dhaka

• Rajshahi

• Chattogram • Khulna

• Rangpur

• Barishal • Sylhet

Sunamganj

Sylhet Habiganj

• Moulvibazar

• Mymensingh

চাইলে এভাবে জেলার ভেতরে উপজেলারও আরেকটি লিস্ট তৈরি করা যায়।

যখন ক্রমবিহীন (unordered) কোনো তালিকা তৈরি করা হয়, তখন তালিকার উপাদানের আগে সাধারণভ বিভিন্ন ধরনের চিহ্ন ব্যবহার করা হয়। HTML এ একটি গোল কালো ফোঁটা (ভিন্ন- disc) চিহ্ন ব্যবহার করা হয়। তবে চাইলে এখানে সার্কেল (circle) বা ক্ষরার (square)-ও ব্যবহার করা যায়। সেজন্য এইচটিএমএল উপাদানের ভেতরে জ্যাট্রিবিউট (attribute) ব্যবহার করতে হবে। অ্যাট্রিবিউট হচ্ছে এলিমেন্টের একটি অংশ যা এলিমেন্টের কার্যক্ষমতা বা ফাংশনালিটি বৃদ্ধি করে। একটি এলিমেন্টের একাধিক অ্যাট্রিবিউট থাকতে পারে, আবার নাও থাকতে পারে।

অ্যাট্রিবিউট লেখার নিয়ম নিচের মতো-

<tag_name attribute_name = "value">

অর্থাৎ অ্যাট্রিবিউটের নামের পর একটি সমান চিহ্ন দিয়ে ডাবল কোটেশনের ভেতরে এর মান লিখতে হয়। ডালিকায় স্কয়ার বা সার্কেল চিহ্ন ব্যবহার করতে চাইলে type নামের একটি অ্যাট্রিবিউট ব্যবহার করতে

হবে।

<ul type="square"> <li>item 1</li> <li>item 2</li>

</ul>

পূর্বের কোডটি লিখলে লিস্ট আইটেমে বর্গাকৃতি চিহ্ন ব্যবহৃত হবে। একইভাবে <ul type="circle"> বসালে

বৃত্তাকৃতি চিহ্ন ব্যবহৃত হবে।

এইচটিএমএল কোড

<ul type="square"> <li>Item 1</li>

Item 1 Item 2

<li> Item 2</li>

</ul>

<ul type="circle">

Item 1

<li> Item 1</li> <li>Item 2</li>

Item 2

</ul>

<ul type="disc">

<li> Item 1</li>

<li> Item 2</li>

Item 1 Item 2

</ul>

আউটপুট

অর্ডারড লিস্টের ক্ষেত্রেও বিভিন্ন পদ্ধতি অনুসরণ করা যায়। যেমন— ছোট হাতের বা বড় হাতের রোমান হরফ (i, ii, iii বা I, II, III) অথবা ইংরেজি হরফ (a, b, c, A, B, C) ইত্যাদি। এখানেও type অ্যাট্রিবিউট ব্যবহার করতে হবে।

আউটপুট

i. Item 1 ii. Item 2

এইচটিএমএল কোড Kol type="">

<li> Item 1</li> <li> Item 2</li>

</ol>

kol type = "T"> <li> Item 1</li>

I. II.

Item 1 Item 2

<li>Item 2</li>

</ol>

<ol type="a">

<li> Item 1</li> <li> Item 2</li>

</ol>

Kol type="A">

<li> Item 1</li> <li>Item 2</li>

</ol>

Kol type="1">

<li>Item 1</li> <li> Item 2</li>

</ol>

২০২১ - 2022

a. Item 1

b. Item 2

A. Item 1

B. Item 2

1. Item 1 2. Item 2

অর্ডারড লিস্টে আবার কখনো কখনো কোনো নির্দিষ্ট সংখ্যা থেকে শুরু করতে হতে পারে। যেমন— কোনো ক্লাসের 21 থেকে 30 রোলধারী শিক্ষার্থীর তালিকা দেখাতে হতে পারে। এক্ষেত্রে start অ্যাট্রিবিউট ব্যবহার করতে হবে। টাইপ a, A, i যাই হোক না কেন, start অ্যাট্রিবিউটের মান সব সময় সংখ্যা (numeric) হবে।

<ol type="1" start="21">

<li>Nayeem Sheikh</li> <li>Robiul Hasan</li>

</ol>

হাইপারলিংক (Hyperlink)

ইন্টারনেটে বিভিন্ন ওয়েটসাইট ভিজিট করার সময় বিভিন্ন লিংকে ক্লিক করা যায়। লিংকে ক্লিক করলে এক পেইজ থেকে অন্য পেইজে বা একই পেইজের বিভিন্ন অংশে যাওয়া যায়। লিংক মানে সংযোগ। এক পেইজের সঙ্গে অন্য পেইজের বা একই পেইজের বিভিন্ন অংশের মধ্যে যে সংযোগ করার পদ্ধতি, তাকে লিংক বলে। এই লিংক যখন হাইপারটেক্সটে HTML-এ থাকে তখন তাকে হাইপারলিংক বলে।

একটু আগে বাংলাদেশের বিভাগগুলোর যে তালিকা তৈরি করা হয়েছিল সেই তালিকায় এখন হাইপারলিংক যুক্ত করা হবে যেন Dhaka লেখাটিতে ক্লিক করলে ঢাকা বিভাগের ওয়েবসাইটে যাওয়া যায়। সেজন্য যে

এলিমেন্টটি ব্যবহার করতে হবে তার নাম অ্যাংকর (anchor)। এর প্রথম অক্ষর a নিয়ে এই এলিমেন্টের ট্যাগ গঠিত।

<li><a href="http://www.dhakadiv.gov.bd"> Dhaka</a></li>

ব্রাউজারে গিয়ে পেইজটি রিফ্রেশ করলে দেখা যাবে যে Dhaka লেখাটি নীল রঙের এবং আন্ডারলাইন করা হয়ে গিয়েছে। ওতে ক্লিক করলেই ঢাকা বিভাগের ওয়েবসাইটে যাওয়া যাবে। ঢাকা বিভাগের ওয়েবসাইটের address বা URL (URL: Uniform Resource Locator) বসানো হয়েছে href অ্যাট্রিবিউটের মাধ্যমে।

নিজে করি ১ : এখন উপরের কোডটি সম্পূর্ণ করতে হবে, যেন প্রত্যেকটি বিভাগের নামে ক্লিক করলে সংশ্লিষ্ট বিভাগের ওয়েবসাইট খুলে যায়।

আবার যদি এমন প্রয়োজন হয় যে, লিংকে ক্লিক করলে সেটি ওয়েব ব্রাউজারের নতুন একটি ট্যাবে খুলুক, তাহলে আরেকটি অ্যাট্রিবিউট ব্যবহার করা যায়, সেটি হলো target অ্যাট্রিবিউট। target অ্যাট্রিবিউটের মান হিসেবে _self ব্যবহার করলে লিংকটি একই ট্যাবে খুলবে, আর _blank ব্যবহার করলে একটি নতুন ট্যাবে খুলবে।

<li><a href="http://www.dhakadiv.gov.bd " target="_blank">Dhaka</a></li>

ছবি বা ইমেজ (Image )

ওয়েবপেইজে ছবি যোগ করতে img এলিমেন্ট ব্যবহার করা হয়। এটি একটি এম্পটি এলিমেন্ট, অর্থাৎ এর

কোনো ক্লোজিং বা শেষ ট্যাগ নেই।

<!DOCTYPE html>

<html>

<head>

<title> Image in html </title> </head>

<body>

<img src="image.jpg">

</body> </html>

কোডটি যে ফোল্ডারে আছে, সেই ফোল্ডারে পছন্দমতো একটি ছবি এনে image.jpg নাম দিয়ে দিতে হবে।

এবার ব্রাউজারে ফাইলটি ওপেন করলে ছবিটি ওয়েবপেইজে দেখা যাবে।

এখানে src (source-এর সংক্ষিপ্ত রূপ) নামের একটি অ্যাট্রিবিউট ব্যবহার করে ছবিটির URL বলে দেওয়া হয়েছে। এই URL কোনো ওয়েবসাইটের কোনো ছবির ঠিকানাও হতে পারে। অন্য কোনো ফোল্ডারের ছবি দেখাতে হলে তাহলে এর মান হিসেবে ছবির পুরো পাথ (path) বসাতে হবে। যেমন— D: \ ড্রাইভের My Pictures ফোল্ডারে image.jpg নামের একটি ছবি দেখাতে হবে এভাবে—

<img src="D / My Pictures/image.jpg">

ছবিটি যদি আকারে বেশ বড় হয় তাহলে হয়তো দেখা যাবে ব্রাউজারে পুরো ছবিটির অংশবিশেষ দেখা যাচ্ছে মাত্র। ছবিটি ঠিকমতো দেখার জন্য তখন ছবির আকার নিয়ন্ত্রণ করতে হবে। ছবির আকার নিয়ন্ত্রণ করার জন্য width ও height নামে দুটি অ্যাট্রিবিউট রয়েছে। ছবিটিকে 300 x 200 পিক্সেল আকারে দেখাতে চাইলে, নিচের মতো কোড লিখতে হবে।

<img src="image.jpg" width="300px" height="200px">

কখনো কখনো বিভিন্ন ওয়েবসাইটে কোনো ছবিতে ক্লিক করলে নতুন পেইজ ওপেন হয়। অর্থাৎ, ছবিটি হাইপারলিংক করা থাকে।

<a href="https://www.google.com" target="_blank">

<img src="image.jpg">

</a>

অর্থাৎ <a>....... </a> ট্যাগের মধ্যে কিছু না লিখে একটি ছবি ব্যবহার করা হলো।

সারণি বা টেবিল (Table)

এইচটিএমএল ব্যবহার করে সারণি বা টেবিল তৈরি করা যায়। টেবিলের আনুভূমিক ঘরগুলোকে বলা হয় সারি বা রো (row), আর উল্লম্ব ঘরগুলোকে বলা হয় স্তম্ভ বা কলাম (column)। টেবিলের একেকটি ঘরকে বলা হয় সেল (cell)। টেবিলের একেবারে উপরের সারিকে বলা হয় হেডার সারি (header) আর একেবারে নিচের সারিকে বলা হয় ফুটার (footer) সারি। তবে হেডার ও ফুটার সারি টেবিলের ঐচ্ছিক উপাদান, অর্থাৎ, সব টেবিলে এ দুটি অংশ নাও থাকতে পারে।

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Example</title>

</head> <body>

<table>

<thead>

<tr> <th>Serial </th> <th>Subject </th> <th>GPA </th>

</tr>

</thead>

<tbody>

<tr> <td>01</td> <td>Bangla </td> <td>500</td> </tr> <tr> <td>02</td> <td>English </td> <td>500</td> </tr> <tr> <td>03</td> <td> Science</td> <td>5.00</td> </tr> <tr> <td>04 </td> <td>Math </td> <td>500</td> </tr>

</tbody> <tfoot >

<tr> <td></td> <td>CGPA </td> <td>500</td> </tr>

</tfoot> </table>

</body>

</html>

কোডটি সেভ করে ব্রাউজারে খুললে নিচের ছবির মতো আউটপুট দেখা যাবে।

HTML Table Example

O File | C:/Users/rafit/Desktop...

Incognito

Serial Subject GPA

01 Bangla 5.00

02 English 5.00

03 Science 5.00

04 Math 5.00

CGPA 5.00

প্রতিটি টেবিল বর্ণনা করা হয় একটি table এলিমেন্ট দিয়ে। এই এলিমেন্টের ভেতরে আবার তিন ধরনের এলিমেন্ট থাকতে পারে। এগুলো হচ্ছে টেবিলের তিনটি অংশ, যথাক্রমে হেডার (header), বড়ি (body) ও ফুটার (footer)। এগুলো যথাক্রমে thead, thody ও tfoot এলিমেন্ট দিয়ে প্রকাশ করা হয়। টেবিল নিয়ে কাজ করতে হলে একেকটি রো বা সারি নিয়ে কাজ করতে হয়। সেজন্য আছে tr বা table row এলিমেন্ট। এর কাজ হচ্ছে টেবিলের একটি সারি তৈরি করা। দশটি সারি দরকার হলে দশটি tr এলিমেন্ট ব্যবহার করতে হবে। হেডার অংশে টেবিলের হেডিং বসাতে th এলিমেন্ট ব্যবহার করা হয়। ব্রাউজারে গেলে দেখা যাবে, হেডিং অংশটি বোল্ড করা আছে। যে কয়টি হেডিং লাগবে সে কয়টি th এলিমেন্ট ব্যবহার করতে হবে।

টেবিলের বডিতে tr এলিমেন্ট দিয়ে সারি তৈরি করা হয়। এরপর তথ্য (data) রাখার জন্য ব্যবহার করা

হয় td (অর্থ, table data) এলিমেন্ট।

এই টেবিলে কোনোরকম বর্ডার ব্যবহার করা হয়নি। তবে চাইলে এভাবে table এলিমেন্টে বর্ডারের কথা

উল্লেখ করে দেওয়া যায়, border অ্যাট্রিবিউট যোগ করে ।

<table border="1">

কিন্তু এভাবে বর্ডার ব্যবহার করলে প্রতিটি সেল বা ঘরের আশেপাশে দুটি করে বর্ডার দেখা যাবে।

HTML Table Example

o File

C:/Users/rafit/Desktop...

个

★

Incognito

Serial

Subject

01 Bangla 5.00

GPA

5.00

03 Science 5.00

English

5.00

Math CGPA 5.00

এটি দূর করতে চাইলে ঘরগুলো ফাঁকা ফাঁকা না রেখে একটির সঙ্গে অন্যটি একেবারে লাগিয়ে রাখতে হবে। এজন্য, ব্যবহার করতে হবে cellspacing অ্যাট্রিবিউট এবং মান দিতে হবে O। এর মান যত দেওয়া হবে, টেবিলের সেলগুলো একে অপরের থেকে তত পিক্সেল দূরে হবে।

<table border="1" cellspacing="0">

টেবিলের সেলগুলোতে অবস্থিত লেখা সেল থেকে একটি নির্দিষ্ট দূরত্বে থাকে। প্রয়োজনবোধে সেই দূরত্ব নিয়ন্ত্রণ করা যায়। এজন্য ব্যবহার করতে হবে cellpadding অ্যাট্রিবিউট।

<table border="1" cellpadding="20">

উপরের টেবিলটিতে বর্ডার দেওয়ার পর এর ফুটারে যে একটি ফাঁকা ঘর আছে তা ভালোভাবে বোঝা যাচ্ছে

এখন এইচটিএমএল দিয়ে টেবিল তৈরির আরেকটি উদাহরণ দেখানো হবে।

Bill Summary

O File | C:/Users/rafit/Desktop/a.html

Bill Summary

Month

Bills

Electricity

Water Gas

January

| February 955

809

600

720

850

700

March

1123

812

775

✩

চিত্র 4.6 : এরকম একটি টেবিল কীভাবে তৈরি করবে?

উপরের টেবিলে লক্ষণীয় বিষয়গুলো হচ্ছে :

টেবিলের উপরে একটি ক্যাপশন রয়েছে।

Month সেলটি দুটি রো জুড়ে রয়েছে।

Bills সেলটি তিনটি কলাম জুড়ে রয়েছে। বাকি সেলগুলো সাধারণভাবে আছে ।

টেবিলের ক্যাপশন দিতে caption নামে একটি এলিমেন্ট ব্যবহার করতে হবে। কয়েকটি রো জুড়ে একটি সেল তৈরি করতে ব্যবহার করতে হয় rowspan অ্যাট্রিবিউট, আর কয়েকটি কলাম জুড়ে একটি সেল তৈরি করতে ব্যবহার করতে হয় colspan অ্যাট্রিবিউট। ছবির টেবিলটির এইচটিএমএল কোড নিচে দেওয়া হলো।

<!DOCTYPE html>

<html> <head>

<title>HTML Table Example</title>

</head> <body>

<table border="1" cellspacing="0" cellpadding="2"> <caption>Bill Summery</caption>

<thead>

The first th element will span two rows. Second th Element will span three columns.

-->

<tr>

<th rowspan="2"> Month </th> <th colspan="3">Bills </th> </tr>

<tr><th>Electricity</th> <th> Water </th> <th>Gas</th> </tr>

On the second row, the first th element will go to Second column. Because second row of first column is spanned by first row. -->

</thead>

<tbody> <tr>

<td>January</td> <td>513</td> <td>53 </td> <td>217</td> </tr>

<tr>

<td>February</td> <td>522</td> <td>59 </td> <td>202 </td>

</tr> <tr>

<td>March</td> <td>578 </td> <td>62</td> <td>224 </td>

</tr>

</tbody> </table>

</body> </html>

উপরের কোডে দুই জায়গায়  চিহ্নের মধ্যে কিছু কথা লেখা হয়েছে। সেখানে বলা হয়েছে যে কোডের thead অংশের কাজ কী। একে বলা হয় কমেন্ট (comment)। ব্রাউজারে যখন ডকুমেন্টটি প্রদর্শিত হবে তখন এই কমেন্ট করা অংশটুকু দেখা যাবে না। ডেভেলপাররা নিজেদের সুবিধার জন্য কমেন্ট করে থাকেন। একজনের লেখা কোড যখন অন্যজন পড়েন, তখন এই কমেন্ট দেখে তিনি সহজেই বুঝতে পারেন কোডের কোন অংশের কাজ কী এবং উদ্দেশ্য কী।

টেবিলের কোনো সেলে হাইপারলিংক যোগ করার প্রয়োজন হলে সাধারণ নিয়মে td বা th এলিমেন্টের ভেতরে a এলিমেন্ট বসাতে হবে। একইভাবে টেবিলের সেলে ছবিও যোগ করা যায়। তবে ছবির ক্ষেত্রে তার আকার নিয়ন্ত্রণ করা খুব গুরুত্বপূর্ণ, না হলে টেবিলটি দেখতে দৃষ্টিনন্দন হবে না।

<td><a href="https://www.google.com"> Google</a> </td>

ওয়েব পেইজে বাংলা দেখানো

নিচের কোডে ওয়েব পেইজে কীভাবে বাংলা লেখা যায় তা দেখানো হলো।

<!DOCTYPE html>

<html>

<head>

<title>Bangla Text in webpage</title>

</head>

<body>

<p> এইচটিএমএল একটি মার্কআপ ভাষা। এটি শেখা খুবই সহজ।</p>

</body> </html>

তবে কিছু কিছু কম্পিউটারে সরাসরি বাংলা লেখা না-ও দেখা যেতে পারে। সব কম্পিউটারে বাংলা লেখা ঠিকভাবে দেখানোর জন্য meta নামের একটি ফাঁকা এলিমেন্ট এবং charset নামের একটি অ্যাট্রিবিউট ব্যবহার করতে হবে। meta এলিমেন্টটি head এলিমেন্টের ভেতরে থাকবে, কারণ এটি পেইজের একটি সেটিংস পরিবর্তন বা ঠিক করছে।

<!DOCTYPE html> <html_lang="bn">

<head>

<title>Bangla Text in webpage</title> <meta charset="utf-8">

</head> <body>

<p>এইচটিএমএল একটি মার্কআপ ভাষা। এটি শেখা খুবই সহজ।</p>

</body> </html>

এখানে charset="utf-8" দিয়ে বোঝানো হয়েছে যে লেখাগুলো দেখানোর জন্য UTF-8 ক্যারেক্টার সেট বা অক্ষরসমষ্টি ব্যবহার করতে হবে। UTF-8 হচ্ছে জনপ্রিয় একটি ইউনিকোড ক্যারেক্টার সেট। এটি বাংলা লেখা সমর্থন করে।

এর পাশাপাশি কোডটিতে html এলিমেন্টেও নতুন একটি অ্যাট্রিবিউট যোগ করা হয়েছে, যেটি হচ্ছে lang অ্যাট্রিবিউট। lang অ্যাট্রিবিউটের কাজ হচ্ছে ডকুমেন্টটি কোন ভাষায় লেখা হয়েছে তা ওয়েব ব্রাউজারকে জানানো। কোনো ভাষার যদি একাধিক উপভাষা থাকে, তাহলে ভাষার পাশাপাশি দুই অক্ষরের অঞ্চল কোড (রিজিওন কোড— region code) বসাতে হয়। যেমন— আমেরিকান ইংরেজির জন্য en-US, বাংলাদেশি বাংলার জন্য bn-BD ইত্যাদি।

div ও span এলিমেন্ট

একটি ডকুমেন্টে বিভিন্ন অংশ থাকে। এসব অংশের কাজ একেক রকম হয়। তাই এদের গঠন ও চেহারাও ভিন্ন হয়। এই অংশগুলোকে আলাদা করতে ব্যবহার করা হয় div এলিমেন্ট। span এলিমেন্টের কাজ হচ্ছে একটি এলিমেন্টের নির্দিষ্ট একটি অংশ নির্বাচন করা। ধরা যাক, একটি প্যারাগ্রাফ কালো রঙে দেখানো আছে। মধ্যে তিনটি শব্দ লাল রং করতে হবে। তখন ওই তিনটি শব্দের দুই পাশে span এলিমেন্টের ট্যাগ বসিয়ে style অ্যাট্রিবিউট ব্যবহার করে রং নির্ধারিত করে দেওয়া যায়।

<p>This is a black text. But <span style="color: red; ">This is red</span> </p>

স্টাইল অ্যাট্রিবিউট (style attribute)

স্টাইল অ্যাট্রিবিউট ব্যবহার করে ওয়েব পেইজের বিভিন্ন এলিমেন্টের রং, ফন্টসহ বিভিন্ন বৈশিষ্ট্য বা প্রোপার্টি (property) উল্লেখ করে দেওয়া যায়। স্টাইল অ্যাট্রিবিউটের ভেতরে বিভিন্ন স্টাইলিং নির্দেশনা দেওয়া যায়। যেমন— এর আগের অংশে দেখানো হয়েছে কীভাবে স্টাইল অ্যাট্রিবিউট ব্যবহার করে লাল রঙে লেখা যায়। এজন্য color প্রোপার্টি ব্যবহার করা হয়েছে। বিভিন্ন এইচটিএমএল এলিমেন্টের বিভিন্ন প্রোপার্টি আছে। একাধিক প্রোপার্টির মান বলে দিতে চাইলে তাদের মধ্যে সেমিকোলন চিহ্ন ব্যবহার করতে হয়।

<!DOCTYPE html>

<html> <head>

<title>style Attribute Experiment</title>

</head> <body>

<div style="width: 100px; height: 100px; background-color: pink; color: darkred; float: left; margin: 5px; padding: 5px; ">Hello There! </div>

<div style="width:100px; height:100px; background-color: paleturquoise; color: forestgreen; float: left; margin: 5px; padding: 5px;"> How are you!</div>

<div style="width:100px; height:100px; background-color: lightskyblue; color: royalblue; float: left; margin: 5px; padding: 5px;">Nice to meet you! </div>

</body> </html>

উপরের কোডটি ছবির মতো আউটপুট তৈরি করবে।

Style Attribute Experiment

File C:/Users/rafil/Desktop... ✰

Hello There!

How are you!

Nice to meet you!

Incognito

আবার একই স্টাইল একাধিক এলিমেন্টে ব্যবহার করতে চাইলে, <head>...</head> অংশের ভিতরে আলাদাভাবে style ট্যাগ দিয়ে সেগুলো বলে দেওয়া যায়। নিচের উদাহরণটিতে সেটি দেখানো হলো-

<!DOCTYPE html>

<html>

<head>

<title>Style Attribute Experiment</title>

<style type="text/css">

div {

width:100px;

height: 100px;

margin: 10px; padding: 10px;

float: left; font-family: sans-serif; font-size: large; text-align: center;

border: 2px solid rgba(0, 0, 0, 0.2); border-radius: 5px;

}

</style>

</head> <body>

<div style="background-color: pink; color: darkred; ">Hello

There!</div>

<div style="background-color: paleturquoise; color: forestgreen;">How are you! </div>

<div style="background-color: lightskyblue; color: royalblue;">Nice to meet you! </div>

</body>

</html>

এখানে style ট্যাপে বলে দেওয়া হয়েছে যাবতীয় div এলিমেন্টের স্টাইল কেমন হবে, অর্থাৎ, width হবে 100 পিক্সেল, height হবে 100 পিক্সেল ইত্যাদি। আর প্রতিটি আলাদা div এলিমেন্টে তাদের নিজস্ব রং (color) ও পেছনের পর্দার রং (background-color) বলে দেওয়া হয়েছে। এভাবে স্টাইল ট্যাগ ব্যবহার করে বিভিন্ন এলিমেন্টের রূপ পরিবর্তন করা যায়।

Style Attribute Experiment

File C:/Users/rafit/Desktop... ✩

Incognito

Hello There!

How are you!

Nice to meet you!

এখানে কিছু প্রোপার্টির নাম ও তাদের ব্যবহার দেখানো হলো—

প্রোপাটির নাম

ব্যবহার

উপাদানের প্রস্থ নির্ধারণ করা

width height

font-family

উপাদানের উচ্চতা নির্ধারণ করা

ফন্ট নির্ধারণ করা

font-size

margin

ফন্টের আকার নির্ধারণ করা

padding

অন্যান্য উপাদান থেকে দূরত্ব নির্ধারণ করা উপাদানের সীমানা থেকে এর ভেতরের উপাদানগুলোর দূরত্ব

নির্ধারণ করা

উপাদান সীমানা দেখতে কেমন হবে তা নির্ধারণ করা

border

text-align

উপাদানের ভেতরের লেখা কীভাবে বিন্যস্ত করা হবে তা নির্ধারণ করা। (যেমন- left, right, center ইত্যাদি)

color

উপাদানের রং নির্ধারণ করা উপাদানের পেছনের পর্দার রং নির্ধারণ করা

background-color

ফন্ট ফ্যামিলির কাজ হলো ফন্ট নির্ধারণ করা। Sans serif ফন্ট হলো simple typer font যেগুলোর প্রতিটি অক্ষরের প্রান্তে কোনো stroke ব্যবহার করা হয় না। পূর্বের কোডে ngba উল্লেখ করা হয়েছে। এখানে ingba न red, green, blue, alpha । এখানে আলফা প্যারামিটারের সংকর মান 0.0 হতে 1.0 এর মধ্যে হবে সবসময়। এক্ষেত্রে যেহেতু red, green, blue এই তিনটিতে ভেল্যু 0 দেয়া হয়েছে সেক্ষেত্রে 0, 0, 0 এর জন্য আসবে full white এবং 0.2 এর জন্য হালকা black, এই মান যতো বাড়বে রঙ ততো গাঢ় হতে থাকবে। আমরা এখানে তিনটি সেনটেন্সকে div এলিমেন্ট দ্বারা আলাদা করে এদের জন্য বিভিন্ন ব্যাকগ্রাউন্ড এবং ফন্ট কালার নির্বাচন করেছি।

Content added By